<template>
  <div class="myfooter" id="myfooter">
    <div>
      <div v-for="item in footerNav" class="footer-list">
        <router-link tag="div" :to="{path:'/common/'+item.routerPath,query:{title:item.title}}" active-class="footer-active" exact>
          <img :src="item.imgsrc" alt="图片"/>
          <div>{{item.title}}</div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
    export default{
      data:function(){
        return {
          isFirst:0,
           imgSrc:[],
           footerNav:[{
             imgsrc:"static/images/footer-img/home.png",
             title:"主页",
             routerPath:"home"
           },
             {
               imgsrc:"static/images/footer-img/course.png",
               title:"英语角",
               routerPath:"english"
             },
             {
               imgsrc:"static/images/footer-img/translate.png",
               title:"同步翻译",
               routerPath:"translate"
             },{
               imgsrc:"static/images/footer-img/personal.png",
               title:"我的",
               routerPath:"personal"
             }]
        }
      },
      mounted:function(){
        if(!this.isFirst){
          this.getImgsrc();
          this.isFirst=1;
        }
      },
      watch:{
        '$route':"isActive"
        // 对路由变化作出响应...
      },
      methods:{
        getImgsrc:function(){
          let footerDiv=document.getElementById("myfooter");
          let aImg=footerDiv.getElementsByTagName("img");
          for(let i=0;i<aImg.length;i++){
            this.imgSrc.push(aImg[i].src);
          }
        },
        isActive:function(){
          let that=this;
          let timer=null;
          let footerDiv=document.getElementById("myfooter");
          let aImg=footerDiv.getElementsByTagName("img");//原始imgsrc
          let len=aImg.length;
          timer=setTimeout(function(){
            let oActive=footerDiv.getElementsByClassName("footer-active")[0];
            for(let i=0;i<len;i++){
              aImg[i].src=that.imgSrc[i];
            }
            if(oActive){
              that.toggleMenu();
            }
            clearTimeout(timer);
          },0);

        },
        toggleMenu:function(){
          let footerDiv=document.getElementById("myfooter");
          let aImg=footerDiv.getElementsByTagName("img");//原始imgsrc
          let oActive=footerDiv.getElementsByClassName("footer-active")[0];
          let oChildImg=oActive.getElementsByTagName("img")[0];
          let srcStr=oChildImg.getAttribute('src');
          let len=aImg.length;
          if(!/-active/.test(srcStr)){
            let activeStr="-active";
            let activeSrc=srcStr.slice(0,-4)+activeStr+srcStr.slice(-4);//拼接路径 更换图片
            for(let i=0;i<len;i++){
              aImg[i].src=this.imgSrc[i];
            }
            oActive.getElementsByTagName("img")[0].setAttribute('src',activeSrc);
          }
        }
      }

    }
</script>
<style scoped>
  div.myfooter{
    width: 100%;
    height: 50px;
    background: #eeeeee;
    color: #353535;
    font-size: 12px;
    position: fixed;
    bottom:0;
    left: 0;
  }
  .myfooter>div{
    /*width: 100%;*/
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items:center;
  }
  .footer-list{
    width: 60px;
    height: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .footer-list img{
    width: 20px;
    height:20px;
  }
  .footer-active{
    color:#f85d3b;
  }
  @media (max-width: 320px){
    div.myfooter{
      height: 40px;
    }
    .myfooter>div{
      height: 40px;
    }
    .footer-list{
      height: 25px;
    }
  }
</style>
